<template>
  <div class="app-container">
    <div id="editor">
      <mavon-editor style="height: 100%" v-model="form.content"></mavon-editor>
    </div>
    <el-button style="margin-top: 10px" type="primary" :loading="loading" @click.native.prevent="onSubmit">提交
    </el-button>
  </div>
</template>

<script>
  import { getAboutContent, editAboutInfo } from '@/api/options'

  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'About',
    data() {
      return {
        loading: false,
        form: {
          content: ''
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getAboutContent().then(response => {
          this.form.content = response.data
        })
      },
      onSubmit() {
        const vm = this
        this.loading = true
        editAboutInfo(this.form).then(response => {
          if (response.code === 0) {
            this.$message({
              message: '提交成功',
              center: true,
              onClose() {
                vm.fetchData()
                vm.loading = false
              }
            })
          }
        })
      }
    },
    components: { mavonEditor }
  }
</script>
<style scoped>
  #editor {
    margin: auto;
    height: 580px;
  }
</style>
